<template>
  <div class="ClassView">
    <van-nav-bar
      title="详情"
      left-text="返回"
      left-arrow
      @click-left="ClickLeft"
    >
    </van-nav-bar>
    <first-grade></first-grade>
    <p class="AllContentNum">共 {{ contentArr?.total }} 条内容</p>
    <class-list-item :contentArr="contentArr"></class-list-item>
  </div>
</template>

<script>
import FirstGrade from "@/components/ClassView/FirstGrade.vue";
import ClassListItem from "@/components/ClassView/ClassListItem.vue";
export default {
  components: { ClassListItem, FirstGrade },
  name: "ClassView",
  data() {
    return {
      activeName: "",
      contentArr: [],
    };
  },

  activated() {
    this.$bus.$on("Classitem", (...data) => {
      this.activeName = data[0];
      this.contentArr = data[1];
    });
  },
  methods: {
    // 返回按钮
    ClickLeft() {
      this.$router.replace("/");
    },
  },
};
</script>

<style lang="scss" >
.ClassView {
  padding: 0 0.875rem;

  min-height: 100%;
  // 导航条
  .van-nav-bar {
    background-color: #fbfbfb;
    .van-nav-bar__left {
      padding: 0 1rem 0 0;
      .van-nav-bar__text {
        color: black;
      }
      .van-icon {
        color: black;
      }
    }
  }
  .AllContentNum {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    color: var(--fontcolor);
  }
}
</style>